<template>
  <div>
    <el-drawer title="物流查询" v-model="visible" :size="1000">
      <template #header>
        <div class="flex items-center title">
          <div class="w-[5px] h-[5px] rounded-[50%] bg-[#3721FF] mr-[10px] circle"></div>
          <div class="tits">物流查询</div>
        </div>
      </template>
      <div class="w-full h-[1px] bg-[#EFEFEF] line"></div>
      <div class="pt-[30px]">
        <div class="flex mb-[18px] items-center titbox">
          <div class="txt font-semibold text-[#101010]">物流信息</div>
          <span class="red">*</span>
        </div>
        <div class="bg-[#FAFAFA] px-[24px] py-[22px] rounded-[4px] formbox">
          <el-form v-model="form">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="查询渠道">
                  <template #label>
                    <div class="flex text-[#101010] items-center">查询渠道</div>
                  </template>
                  <el-select v-model="form.channel" placeholder="请选择查询渠道">
                    <el-option label="顺丰" value="shanghai" />
                    <el-option label="圆通" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="物流商">
                  <template #label>
                    <div class="flex text-[#101010] items-center">物流商</div>
                  </template>
                  <el-select v-model="form.channel" placeholder="请选择物流商">
                    <el-option label="顺丰" value="shanghai" />
                    <el-option label="圆通" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 10px">
              <el-col :span="24">
                <el-form-item label="物流单号">
                  <template #label>
                    <div class="flex text-[#101010] items-center">物流单号</div>
                  </template>
                  <el-input v-model="form.orderNo" placeholder="请输入物流单号" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item class="mt-[30px] pl-[68px]">
              <el-button
                type="primary"
                color="#3721FF"
                class="w-[120px]"
                style="height: 40px"
                @click="onSubmit"
                v-if="!isQueryed"
              >
                确定
              </el-button>
              <!-- <el-button
                type="primary"
                color="#3721FF"
                class="w-[120px]"
                style="height: 40px"
                @click="onSubmit"
                v-else
              >
                更换物流单号
              </el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="w-full h-[1px] bg-[#efefef] my-[32px] line"></div>
      <div class="list">
        <div class="empty" v-if="!list.length">
          <el-empty description="暂无物流数据">
            <template #image>
              <img :src="Empty" />
            </template>
          </el-empty>
        </div>
        <div class="itembox" v-else>
          <!-- 显示物流信息 -->
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import Empty from '@/assets/mall/trade/order/empty.png'
const form = reactive({
  channel: '',
  orderNo: ''
})

const list = ref([])

const isQueryed = ref(false)

const visible = ref(false)

/**
 * 查询
 */
const onSubmit = () => {
  console.log('submit!')
}

const show = () => {
  visible.value = true
}

const hide = () => {
  visible.value = false
}

defineExpose({
  show,
  hide
})
</script>

<style lang="scss" scoped>
:deep(.el-drawer__header) {
  margin-bottom: 0px;
}
</style>
